目標：做出首頁 Hero、導覽列、作品卡片、頁尾；串接留言 API（或先以假資料渲染）。

前端要點（任一技術棧皆可）

• RWD：Container 寬度、Grid 列數、圖片比例固定
• 元件化：WorkCard 接受 title, cover, tags, link
• 無障礙：alt 文字、按鈕 aria-label
• 體驗：Loading 與錯誤提示、表單防連點

假資料（client/data/works.json）

[
  { "title": "醫療儀表板", "cover": "/img/work1.png", "tags": ["React","Chart"], "link": "#" },
  { "title": "RWD 個人頁", "cover": "/img/work2.png", "tags": ["HTML","CSS"], "link": "#" }
]

前端 fetch 串接（精簡版）

async function loadComments(){
  const res = await fetch('https://你的後端網域/api/comments');
  return await res.json();
}
async function sendComment(name, message){
  const res = await fetch('https://你的後端網域/api/comments',{
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({ name, message })
  });
  return await res.json();
}

檢查清單

• [ ] 首頁完成（Hero、Intro、Works 摘要、CTA）
• [ ] 作品區：卡片 4~6 張、標籤篩選（可選）
• [ ] 聯絡表單可送出（先以 Console / Toast 呈現）

Day 28 延伸補充：把資料存在後端 (Express + 假資料 / SQLite / JSON)

• 假資料：先以 GET /api/works 回傳硬編碼陣列。
• JSON：將 works.json 移到 server/db/works.json，改由 GET /api/works 讀檔回傳。
• SQLite：建立 works 表，欄位 { id, title, cover, tags (JSON), link }，前端以 fetch('/api/works') 取得並渲染。